
.header-top{
    height: 60px;
    background-color: #A3D0C3;
    margin: 5px ;
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-radius: 2%;
}

.menu-icon{
    width: 30px;
    height: 15px;
    border-top: 5px solid #DD575C;
    border-bottom: 5px solid #DD575C;
    background-color: #DD575C;
    padding: 5px 0;
    background-clip:content-box;
}
.header-top img {
    width: 50px; /* 或你想要的尺寸 */  
    height: 50px; /* 宽度和高度相同以保持圆形 */ 
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}
.header-title{
    background-color: #A3D0C3;
    height: 100px;
    margin: 5px ;
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-radius: 2%;
}
.header-title .top-head{
    width: 120px;
    font-size: 25px;
    display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/
}
.header-title .top-content{
    font-family: FontAwesome;
    font-size: 15px;
    color: #120d01;
}
  /*搜索框1*/
div.search {
    padding: 10px 0;
    margin: 5px ;
    background: #A3D0C3;
    display: flex;
    justify-content: center;
    margin-bottom: 10px ;
    border-radius: 2%;
 }
  .bar input {
      border: 2px solid #7BA7AB;
      border-radius: 5px;
      background: #F9F0DA;
      color: #9E9C9C;
  }
  .bar button {
      top: 0;
      right: 0;
      background: #7BA7AB;
      border-radius: 0 5px 5px 0;
  }
  .bar button:before {
      content: "搜索";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
  }

.index-content .content {
	height:220px;
    display: flex;
    justify-content: flex-start;
    background-color: #eee;
    margin: 5px ; 
    border-radius: 2%;
}
.index-content .content img{
	width:100px;
	height:220px;
    margin-right: 5px ;
    border-radius: 2%;
}
.content-title{
    font-size: 20px;
    line-height: 40px;
    font-weight: 600;
    /* background-color: #DD302D; */
    -webkit-line-clamp: 1; /* 限制在3行 */
    overflow: hidden; /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 超出的文本用省略号显示 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}
 .content-autho{
    font-size: 11px;
    line-height: 30px;
    /* background-color: #3c2ddd; */
    -webkit-line-clamp: 1; /* 限制在3行 */
    overflow: hidden; /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 超出的文本用省略号显示 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
}

 .content-text{
    font-size: 15px;
    line-height: 30px;
    /* background-color: #2ddd2d; */
    text-indent: 2em;
    overflow: hidden; /* 超出的文本隐藏 */
    text-overflow: ellipsis; /* 超出的文本用省略号显示 */
  display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 5; /* 限制在3行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */

}
.page-end{
    height:50px;
    background-color: white
}
.footer{
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 97%;
  margin-top: 5px ; 
  margin-left: 5px ; 
  background-color: #eee;
  border-radius: 2%;    
}
.footer>div{
   height:50px;
   text-align: center;
  
   flex-grow: 1; 
}
.footer .foot{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 50px; /* 容器的高度 */
}
.footer .one{
    background-color: #017E5C;
}

/* 弹窗的样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 位于顶层 */
    left: 0;
    top: 0;
    width: 100%; /* 全屏宽度 */
    height: 100%; /* 全屏高度 */
    overflow: auto; /* 超出内容可滚动 */
    background-color: rgb(0,0,0); /* 背景颜色带些透明度 */
    background-color: rgba(0,0,0,0.4); /* 透明度 */
  }
   
  /* 弹窗内容的样式 */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
   
  /* 隐藏关闭按钮 */
  .close {
    color: #aaa;
    float: right;
    font-size: 18px;
    font-weight: bold;
  }
   
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }